<template>
  <div class="mainBody">
    <div class="mainImgBox">
      <div class="titleTop">
        <span class="fontHt">TV列表</span>
      </div>
      <img src="http://mcgamehome.love/img/background/qOUe5d.jpg" alt="http://mcgamehome.love/img/background/qOUe5d.jpg">
    </div>
    <div class="nrBody">
      <span class="fontHt status--red tipSpan">请先添加完视频再来修改TV</span>
      <div class="table-waike">
        <table class="table-one">
          <thead class="table__thead">
          <tr class="tr-p2">
            <th class="p-def tr-p">ID</th>
            <th class="p-def tr-p">视频ID</th>
            <th class="p-def tr-p2">视频名字</th>
            <th class="p-def tr-p">视频评分</th>
            <th class="p-def tr-p2">视频介绍</th>
            <th class="p-def tr-p2">视频图片</th>
            <th class="p-def tr-p2">图片背景颜色</th>
            <th class="p-def tr-p2">视频评分数量</th>
            <th class="p-def tr-p2">图片点击数量</th>
            <th class="p-def tr-p">操作</th>
          </tr>
          </thead>
          <tbody class="table__tbody">
          <tr class="table-row" v-for="(item,index) in addForms.items" :key="item.id">
            <td class="table-row__td1">
              <span class="table-row__progress">{{item.id}}</span>
            </td>


            <td data-column="Progress2" class="table-row__td1">
              <span class="table-row__progress status--blue ">{{item.tvUrl}}</span>
            </td>
            <td data-column="Progress2" class="table-row__td">
              <span class="table-row__progress status--green">{{item.tvName}}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1">
              <span class="table-row__progress status--red">{{item.tvPf}}</span>
            </td>
            <td data-column="Progress2" class="table-row__td" :title="item.tvTitle">
              <span class="table-row__progress status--blue longSpan">{{ item.tvTitle }}</span>
            </td>
            <td data-column="Progress2" class="table-row__td1" :title="item.tvImg">
              <span class="table-row__progress status--red">{{ item.tvImg }}</span>
            </td>
            <td data-column="Progress2" class="table-row__td">
              <span class="table-row__progress status--blue ">{{ item.color }}</span>
            </td>
            <td data-column="Progress2" class="table-row__td">
              <span class="table-row__progress status--blue ">{{ item.tvPfNum }}</span>
            </td>
            <td data-column="Progress2" class="table-row__td">
              <span class="table-row__progress status--blue ">{{ item.clackNum }}</span>
            </td>
            <td class="table-row__td">
              <div class="table-one-div">
                  <div class="svg" @click="setTv(item.id)">
                    <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"><g>	<g>		<path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>--%>
						                                        <path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>--%>
                      <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                  </div>
                <a @click="" class="a-def"><div class="span-wk"><span class="c-white">删除</span></div></a>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import Hls from "hls.js";
import API from "@/api/AxiosConfig";
import {useRouter} from "vue-router";

const router = useRouter()
const addForms = reactive({
  items:[],
  listId:[]
})
onMounted(() => {
  API({ url: '/api/videoTv', method: 'get' }).then(res => {
    addForms.items = res.data
  }).catch(err => {
    // console.log(err)
  })
})

function setTv(i) {
  router.push({path:'/adminI-AM-WASTE/videoTvSet',query:{id:''+i+''}})
}
</script>

<style lang="less" scoped>
.tipSpan{
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.table-waike{
  margin-top: 30px;
}
.commentUpButton{
  width: 80px;
  height: 45px;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
  outline: none;
  border: none;
  background-color: #2d8cf0;
  margin-left: 15px;
}
.commentInput{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 100%;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  background: #F1F2F3;
  font-family: 黑体;
  font-weight: bold;
}
.marl20{
  margin-left: 18px;
}
.mar-l-10{
  margin-left: 10px;
}
.tr-p2{
  display: flex;
  width: 100%;
}
.table-row{
  display: flex;
  width: 100%;
  border-bottom: 1px solid #e4e9ea;
  background-color: #fff;
}
.table__tbody{
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.svg{
  width: 32px;
  height: 17px;
  padding: 5px 10px;
  border-radius: 50px;
}
.svg:hover{
  background-color: #cee6ff;
}
.svg>svg{
  width: 15px;
  height: 15px;
}
.table-one-div{
  display: flex;

}
.table__th {
  color: #9eabb4;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  border:0 !important;
  padding: 15px 8px !important;
}

.table__th:hover {
  color: #01b9d1;
}

.table--select-all {
  width: 18px;
  height: 18px;
  padding: 0 !important;
  border-radius: 50%;
  border: 2px solid #3fd2ea;
}
.table-row__td {
  display: flex;
  padding: 10px 15px ;
  vertical-align: middle;
  color: #ef9a9a;
  font-size: 13px;
  font-weight: 400;
  position:relative;
  //line-height: 18px;
  border:none;
  text-align: center;
  flex: 1;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.table-row__td1 {
  display: flex;
  //padding: 10px 15px ;
  vertical-align: middle;
  color: #ef9a9a;
  font-size: 13px;
  font-weight: 400;
  position:relative;
  //line-height: 18px;
  border:none;
  text-align: center;
  flex: 1;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  //max-width: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* -webkit-line-clamp: 1; */
  /* 能够显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.table-row__td2 {
  display: flex;
  padding: 10px 15px ;
  vertical-align: middle;
  color: #ef9a9a;
  font-size: 13px;
  font-weight: 400;
  position:relative;
  //line-height: 18px;
  border:none;
  text-align: center;
  flex: 2;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  min-width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* -webkit-line-clamp: 1; */
  /* 能够显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.table-row__tds {
  padding: 10px 15px !important;
  vertical-align: middle !important;
  color: #ef9a9a;
  font-size: 13px;
  font-weight: 400;
  position:relative;
  line-height: 18px !important;
  border:0 !important;
  max-width: 600px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-line-clamp: 1; */
  /* 能够显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}

.table-row__img{
  width: 36px;
  height: 36px;
  display: inline-block;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.table-row__info {
  display: inline-block;
  padding-left: 12px;
  vertical-align: middle;
}

.table-row__name {
  color: #53646f;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 0px;
}

.table-row__small {
  color: #9eabb4;
  font-weight: 300;
  font-size: 12px;
}

.table-row__policy {
  color: #53646f;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 0px;
}
.table-row__p-status {
  margin-bottom: 0;
  font-size: 13px;
  vertical-align: middle;
  display: inline-block;
  color: #9eabb4;
}


.table-row__status{
  margin-bottom: 0;
  font-size: 13px;
  vertical-align: middle;
  display: inline-block;

}


.table-row__progress{
  margin-bottom: 0;
  font-size: 13px;
  vertical-align: middle;
  display: inline-block;
  font-family: 黑体;
  font-weight: bold;
}

.status:before{
  content: '';
  margin-bottom: 0;
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  color: #1de9b6;
}

.status--red{
  color: #e36767;
}

.status--blue{
  color: #3fd2ea;
}

.status--yellow{
  color: #ecce4e;
}

.status--green{
  color: #00897b;
}

.status--grey{
  color: #9eabb4;
}


.table__select-row {
  appearence: none;
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0 0 0 5px !important;
  vertical-align: middle;

  border-radius: 50%;
  cursor: pointer;
}

.table__select-row:hover{
  border-color:#01b9d1;
}


.table-row--overdue {
  width: 3px;
  background-color: #e36767;
  display: inline-block;
  position: absolute;
  height: calc(100% - 24px);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.table-row__edit {
  padding: 8px 17px;
  display: inline-block;
  background-color: #daf3f8;
  border-radius: 18px;
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
}

.table-row__bin {
  width: 16px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.table__thead {
  border-bottom: 4px solid #aaaaff;
  display: flex;
}
.tr-p{
  text-align: center;
  flex: 1;
}
.tr-p2{
  text-align: center;
  flex: 2;
  justify-content: center;
}
.table-one{
  width: 100%;
  padding: 0 10px;
}
.span-wk{
  padding: 6px 15px;
  border-radius: 50px;
  user-select: none;
  font-family: 黑体;
  font-weight: bold;
}
.span-wk:hover{
  background-color: #ffe0e0;
}
.nrBody{
  display: flex;
  padding: 35px 35px;
  flex-direction: column;
  font-family: 黑体;
  font-weight: bold;
}
.mainBody{
  display: flex;
  width: 100%;
  flex-direction: column;
}
.mainImgBox{
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.mainImgBox>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.titleTop{
  color: #FFFFFF;
  font-size: 40px;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  z-index: 1;
  user-select: none;
}
.fontHt{
  font-family: 黑体;
  font-weight: bold;
}
@media screen and (min-width: 2061px) {
  .nrBody {
    width: 1680px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .nrBody {
    margin: 0 70px 0 70px;
  }
}
.active{
  background-color: #DFF6FD;
  color: #00AEEC;
}
.longSpan{
  max-width: 300px;
  min-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* 能够显示的行数，超出部分用...表示*/
  -webkit-box-orient: vertical;
}
</style>
